<template>
    <view class="bottom-bar buy-bottom-bar">
        <view class="action">
            <view class="action-item home-item" @click="easyGoHome">
                <uni-icons type="home-filled" size="44" customIcons="icon-green"></uni-icons>
                <text>首页</text>
            </view>
            <view class="action-item" @click="goCart">
                <view class="icon-cart">
                    <uni-badge size="small" :text="num" absolute="rightTop" type="error" :offset="[-70, -40]">
                    </uni-badge>
                    <uni-icons type="cart" size="44"></uni-icons>
                </view>
                <text>购物车</text>
            </view>
        </view>
        <button class="btn btn-success" @click="addCart">加入购物车</button>
    </view>
</template>

<script>
import { mapGetters } from "vuex"
import { getCartTotal } from "@/utils/cartUtil.js"
export default {
    props: [],
    data() {
        return {
            num: 0,
        }
    },
    watch: {
        //监听购物车数据
        getCartData(e) {
            this.getCartNum()
        },
    },
    computed: {
        ...mapGetters(["getCartData"]),
    },
    mounted() {
        this.getCartNum()
    },
    methods: {
        //获取购物车总数
        getCartNum() {
            getCartTotal(this.getCartData, (res) => {
                this.num = res.totalNum
            })
        },
        //添加到购物车
        addCart() {
            this.$emit("showSku", "a")
        },
        //进入购物车
        goCart() {
            uni.navigateTo({
                url: "/pages/cart/cartTemp",
            })
        },
    },
}
</script>

<style lang="scss">
.buy-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    .action {
        display: flex;
        flex: 3;
        flex-direction: row;
        margin-right: 20rpx;

        .action-item {
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            text {
                margin-top: 6rpx;
            }
        }

        .home-item {
            text {
                color: $app-color-main;
            }
        }

        .icon-cart {
            position: relative;
        }
    }

    .btn {
        flex: 4;
    }
}
</style>
